<template>
  <div class="size-full max-w-lg items-center justify-center overflow-hidden p-8">
    <BoxReveal color="#E1251B">
      <p class="text-[3.5rem] font-semibold">Inspira UI<span class="text-[#E1251B]">.</span></p>
    </BoxReveal>

    <BoxReveal
      color="#E1251B"
      :duration="0.8"
    >
      <h2 class="mt-[.5rem] text-[1rem]">
        Beautiful components for
        <span class="text-[#E1251B]">Vue &amp; Nuxt.</span>
      </h2>
    </BoxReveal>

    <BoxReveal
      color="#E1251B"
      :duration="1"
    >
      <div class="mt-6">
        <p>
          -&gt; Free and open-source animated components built with
          <span class="font-semibold text-[#E1251B]"> Vue/Nuxt</span>,
          <span class="font-semibold text-[#E1251B]"> Typescript</span>,
          <span class="font-semibold text-[#E1251B]"> Tailwind CSS</span>, and
          <span class="font-semibold text-[#E1251B]"> motion-v</span>
          . <br />
          -&gt; 100% open-source, and customizable. <br />
        </p>
      </div>
    </BoxReveal>
  </div>
</template>
